/**
 * Tab Kit
 * http://jomel.me.uk/software/firefox/tabkit/
 */
 
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/************************************************************
 * Hack to expose overflow scrollbars for Javascript access *
 ************************************************************/

.tabbrowser-tabs scrollbar { /*[Fx2only], due to https://bugzilla.mozilla.org/show_bug.cgi?id=369676 - in Fx3 we do this using ua.css*/
	-moz-binding: url(chrome://tabkit/content/bindings.xml#scrollbar);
}

/*************************
 * Emphasize unread/selected tabs *
 *************************/

/* Make sure tabs can be colored */
/* (the alternative would have been to color them using a canvas, see ChromaTabs) */
#content .tabbrowser-tabs[tk-forcethemecompatibility] .tabbrowser-tab {
	-moz-appearance: none !important;
	background: -moz-dialog url("chrome://tabkit/skin/tab-bkgnd.png") repeat-x !important;
	color: -moz-dialogtext !important;
}
#content .tabbrowser-tabs[tk-forcethemecompatibility] .tabbrowser-tab:not([selected="true"]):hover {
	background-image: url("chrome://tabkit/skin/tab-hover-bkgnd.png") !important;
}
#content .tabbrowser-tabs[tk-forcethemecompatibility] .tabbrowser-tab[selected="true"] {
	background-image: url("chrome://tabkit/skin/tab-active-bkgnd.png") !important;
}

/* Tweaks for dark themes */
#content .tabbrowser-tabs[tk-darktheme] {
	background-color: black;
}
#content .tabbrowser-tabs[tk-darktheme][tk-forcethemecompatibility] .tabbrowser-tab {
	opacity: 0.9;
}
#content .tabbrowser-tabs[tk-darktheme][tk-forcethemecompatibility] .tabbrowser-tab:hover,
#content .tabbrowser-tabs[tk-darktheme][tk-forcethemecompatibility] .tabbrowser-tab[selected="true"] {
	opacity: 1.0;
}


/* Italicize unread tabs */
.tabbrowser-tabs[highlightunread] .tabbrowser-tab:not([read]) .tab-text {
	font-style: italic !important;
}
.tabbrowser-tabs[highlightunread] .tabbrowser-tab[read] .tab-text {
	font-style: normal !important; /* just in case themes use italic by default! */
}

/* Highlight unread tabs */
/* If Sorting and Grouping sets "colortabnotlabel" we do the opposite */
#main-window > #browser-stack .tabbrowser-tabs[highlightunread]:not([colortabnotlabel]) .tabbrowser-tab:not([read]) > */*[Fx2only]*/,
#main-window > #browser .tabbrowser-tabs[highlightunread]:not([colortabnotlabel]) .tabbrowser-tab:not([read])/*[Fx3only]*/ {
	background-color: yellow !important; /* We rely on our theme detection to ensure that any background-image is suitably translucent */
	color: black !important;
}
.tabbrowser-tabs[highlightunread][colortabnotlabel] .tabbrowser-tab:not([read]) .tab-text {
	background-color: #ff6 !important;
	color: black !important; /* We can't take the risk of them having a white on black theme */
}

/* Highlight protected tabs */
#main-window > #browser-stack .tabbrowser-tabs[emphasizeprotected]:not([colortabnotlabel]) .tabbrowser-tab[protected="true"] > */*[Fx2only]*/,
#main-window > #browser .tabbrowser-tabs[emphasizeprotected]:not([colortabnotlabel]) .tabbrowser-tab[protected="true"]/*[Fx3only]*/ {
	background-color: green !important; /* We rely on our theme detection to ensure that any background-image is suitably translucent */
	color: white !important;
}
.tabbrowser-tabs[emphasizeprotected][colortabnotlabel] .tabbrowser-tab[protected="true"] .tab-text {
	background-color: green !important;
	color: white !important;
}
.tabbrowser-tab[protected="true"] .tab-close-button {
	display: -moz-box !important; /* Display even if they're normally hidden */
	list-style-image: url(chrome://browser/skin/Secure.png) !important; /* Show padlock instead of close button */
	-moz-image-region: rect(1px, 15px, 15px, 1px) !important;
	cursor: pointer !important; /* Since the image doesn't have a hover state */
}

/* Highlight current tab */
#main-window > #browser-stack .tabbrowser-tabs[emphasizecurrent]:not([colortabnotlabel]) .tabbrowser-tab[selected="true"] > */*[Fx2only]*/,
#main-window > #browser .tabbrowser-tabs[emphasizecurrent]:not([colortabnotlabel]) .tabbrowser-tab[selected="true"]/*[Fx3only]*/ {
	background-color: black !important; /* We rely on our theme detection to ensure that any background-image is suitably translucent */
	color: white !important;
}
.tabbrowser-tabs[emphasizecurrent][colortabnotlabel] .tabbrowser-tab[selected="true"] .tab-text {
	background-color: black !important;
	color: white !important;
}


/* Give tab labels pretty rounded borders */
.tabbrowser-tabs[multirow="true"] .tabbrowser-tab .tab-text {
	-moz-border-radius: 3px 3px 1px 1px;
}
.tabbrowser-tabs[multirow="true"] .tabbrowser-tab[selected="true"] .tab-text {
	-moz-border-radius: 3px 3px 3px 3px;
}

/******************************
 * Tab bar & sidebar position *
 ******************************/

/*
[Fx2only]:

stack					H #browser-stack
 hbox					H #browser
  vbox					V #sidebar-box
  splitter				H #sidebar-splitter
  vbox					V #appcontent
   tabbrowser			H #content								gBrowser
    tabbox				V   > tabbox							gBrowser.mTabBox
     hbox				H .tabbrowser-strip						gBrowser.mStrip
      tabs				H .tabbrowser-tabs						_tabContainer
       stack			H .tabs-stack
        vbox			V   > vbox:last-child
         hbox			H   > vbox:last-child > hbox
          arrowscrollboxH .tabbrowser-arrowscrollbox			_tabstrip
           scrollbox	H   > scrollbox
            box			H   > .box-inherit scrollbox-innerbox	_tabInnerBox
             tab		H 
     tabpanels			H

[Fx3only]:

hbox					H #browser
 vbox					V #sidebar-box
 splitter				H #sidebar-splitter
 vbox					V #appcontent
  tabbrowser			H #content								gBrowser
   tabbox				V   > tabbox							gBrowser.mTabBox
    hbox				H .tabbrowser-strip						gBrowser.mStrip
     tabs				H .tabbrowser-tabs						_tabContainer
      stack				H .tabs-stack
       hbox				H .tabs-container
        arrowscrollbox	H .tabbrowser-arrowscrollbox			_tabstrip
         scrollbox		H   > scrollbox
          box			H   > .box-inherit scrollbox-innerbox	_tabInnerBox
           tab			H 
    tabpanels			H
*/

/* Inspired by Kurt Schultz (supernova_00): http://www.supernova00.biz/userchrome.html */

/* Note:
 * All the -moz-box-* properties set below are mainly for reference
 * The real work goes on in the JS that sets their corresponding attributes
 */

/* This is set by JS. If you set both they cancel out! Instead we actually force this to inherit. */
/*#browser[vertisidebar="reverse"],
#browser[horizsidebar="reverse"] {
	-moz-box-direction: reverse !important;
}*/
#browser[vertisidebar], #browser[horizsidebar] {
	direction: inherit;
}

#browser[horizsidebar],
#browser[horizsidebar] > #sidebar-splitter,
#browser[horizsidebar] > #sidebar-box > sidebarheader {
	-moz-box-orient: vertical !important;
}
#browser[horizsidebar] > #sidebar-box,
#browser[horizsidebar] > #appcontent {
	-moz-box-orient: horizontal !important;
}

#browser[horizsidebar] > #sidebar-box > sidebarheader {
	-moz-box-pack: end !important;
	border-left: 1px solid ThreeDHighlight !important;
	margin-left: 1px !important;
}
#browser[horizsidebar] > #sidebar-box .tabs-closebutton > .toolbarbutton-icon {
	padding: 4px 2px !important;
}
#browser[horizsidebar] #sidebar-title {
	display: none !important;
}
#browser[horizsidebar] #sidebar-throbber {
	margin-left: 4px !important;
}
#browser[horizsidebar] #sidebar {
	width: inherit !important;
	max-width: inherit !important;
	height: 200px !important;
	min-height: 150px !important;
}

/* Inspired by Stephen Clavering (clav): http://forums.mozillazine.org/viewtopic.php?p=238798#238798 */

/* Note:
 * All the -moz-box-* properties set below are mainly for reference
 * The real work goes on in the JS that sets their corresponding attributes
 * (except .tabbrowser-tab { -moz-box-align })
 */

/* This is set by JS. If you set both they cancel out! */
/*#content[horiztabbar="reverse"] > tabbox,
#content[vertitabbar="reverse"] > tabbox {
	-moz-box-direction: reverse !important;
}*/

#content[vertitabbar] > tabbox,
#content[vertitabbar] .tabs-stack > vbox:last-child/*[Fx2only]*/ {
	-moz-box-orient: horizontal !important;
	max-height: none !important;
}
#content[vertitabbar],
#content[vertitabbar] > tabbox > .tabbrowser-strip,
#content[vertitabbar] .tabbrowser-tabs,
#content[vertitabbar] .tabs-stack,
#content[vertitabbar] .tabs-stack > vbox:last-child > hbox/*[Fx2only]*/,
#content[vertitabbar] .tabs-container/*[Fx3only]*/,
#content[vertitabbar] .tabbrowser-arrowscrollbox,
#content[vertitabbar] .tabbrowser-arrowscrollbox > scrollbox,
#content[vertitabbar] .tabbrowser-arrowscrollbox > scrollbox > .scrollbox-innerbox,
#content[vertitabbar] > tabbox > tabpanels {
	-moz-box-orient: vertical !important;
	max-height: none !important;	
}

#content[vertitabbar] .tabbrowser-arrowscrollbox .scrollbox-innerbox {
	overflow-x: hidden !important;
	overflow-y: auto !important;
}
/* Hide scrollbuttons since we're putting in a scrollbar */
#content[vertitabbar] .tabbrowser-arrowscrollbox .scrollbutton-up,
#content[vertitabbar] .tabbrowser-arrowscrollbox .scrollbutton-down-stack/*[Fx2only]*/,
#content[vertitabbar] .tabbrowser-arrowscrollbox .scrollbutton-down/*[Fx3only]*/ {
	display: none !important;
}
#content[vertitabbar] .tabbrowser-tab {
	-moz-box-sizing: padding-box !important;
	min-height: 24px !important;
	max-height: 24px !important;
	/*-moz-box-orient: horizontal !important;*/ /* not done by JS */
	/*-moz-box-align: start !important;*/ /* not done by JS */
	margin-top: 0 !important; /*[sinceFx3]*/
	margin-bottom: 0 !important; /*[sinceFx3]*/
	padding-top: 0 !important; /*[sinceFx3]*/
}

/* The All Tabs button is redundant in Firefox 2 since the vertical tab bar is
 * a permanent equivalent to the All Tabs popup (Firefox 3 however adds the tab
 * quickmenu, which is useful).
 */
#content[vertitabbar] .tabs-alltabs-stack/*[Fx2only]*/ {
	display: none; 
}

/* Hide bottom border */
#content[vertitabbar] .tabs-stack > vbox:first-child {
	display: none !important;
}

#content[vertitabbar] .tabbrowser-tabs {
	-moz-box-align: stretch !important; /* Make sure tabs fill width */
	background-image: none !important; /* Background was designed for repeat-x, and looks ugly when tiled vertically */
}
/* Cosmetic: hide tab side images */
#content[vertitabbar] .tabbrowser-tab .tab-image-left/*[Fx2only] (and apparently Fx3/Mac)*/,
#content[vertitabbar] .tabbrowser-tab .tab-image-right/*[Fx2only] (and apparently Fx3/Mac)*/ {
	display: none !important;
}

/* Hide splitter when tab bar is hidden */
.tabbrowser-strip[collapsed="true"] + #tabkit-splitter:not([state="collapsed"]) {
	visibility: collapse;
}

/**************
 * Search bar *
 **************/

#content:not([vertitabbar]) #tabkit-filtertabs-box {
	-moz-box-orient: horizontal;
}
#content:not([vertitabbar]) #tabkit-filtertabs-query:not([focused="true"]) {
	width: 18px;
}
#content:not([vertitabbar]) #tabkit-filtertabs-includetext {
	display: none; /* I'd like to find a way of incorporating it, but have yet to find a neat way, so for now this option is only available when the tab bar is vertical */
}

/************************
 * Sorting and Grouping *
 ************************/

.tabbrowser-tab[groupcollapsed] {
	text-decoration: underline;
}

/* Show plus icon next to favicon for collapsed groups */
.tabbrowser-tab[groupcollapsed] > .tab-icon-image {
	width: 32px;
	border-left: 16px solid transparent;
	background: none;
	background-position: -13px 50%;
	background-repeat: no-repeat;
	background-image: url(chrome://tabkit/skin/twisty-clsd.png);
}

/* Override colors inherited from tabs */
.tabs-alltabs-button > menupopup > menuitem:hover,
.tabs-alltabs-button > menupopup > menuitem:hover > label {
	color: HighlightText !important;
	background-color: Highlight !important;
}

#menu_tabkit-sortgroup label.menu-accel {
	font-size: 80%;
}

/******************************************
 * Close Tabs Before and Close Tabs After *
 ******************************************/

.menu_tabkit-closeBeforeAfter-horizontal, .menu_tabkit-closeBeforeAfter-vertical {
	display: none !important;
}
#content[closebeforeafternotother] .tabbrowser-strip menuitem[oncommand*="removeAllTabsBut"] {
	display: none !important;
}
#content[closebeforeafternotother] .menu_tabkit-closeBeforeAfter-horizontal {
	display: -moz-box !important;
}
#content[closebeforeafternotother][vertitabbar] .menu_tabkit-closeBeforeAfter-horizontal {
	display: none !important;
}
#content[closebeforeafternotother][vertitabbar] .menu_tabkit-closeBeforeAfter-vertical {
	display: -moz-box !important;
}

/******************
 * Multi-row tabs *
 ******************/

#tabkit-tab-drop-indicator-bar {
	height: 0 !important; /* Prevent moving mouse over indicator bar causing drop arrow to flash and drops to fail */
	left: -5px !important; /* TODO=P3: [Fx3only] Hack as it was misaligned */
}
#browser-stack #tabkit-tab-drop-indicator-bar {
	left: 0 !important; /*[Fx2only] Undo hack*/
}
#tabkit-tab-drop-indicator-bar[dragging="false"] { /*[Fx2only]*/
    display: none;
}
#tabkit-tab-drop-indicator-bar[collapsed="true"] { /*[Fx3+]*/
    display: none; /* So when switching from vertical tabs to multirow tabs the tabbar doesn't stay very tall */
	visibility: visible; /* Removing the collapsed attribute caused the tab bar to scroll (?!?!), so now keep collapsed attribute permanently on and use display: -moz-box/none to show/hide it. */
}
#tabkit-tab-drop-indicator-bar > hbox {
	margin-bottom: -14px !important; /* Prevent moving mouse over indicator bar causing drop arrow to flash and drops to fail */
}

.tabbrowser-tabs[multirow="true"] {
	max-height: none !important;
}

.tabbrowser-tabs[multirow] .tabbrowser-arrowscrollbox .scrollbutton-up,
.tabbrowser-tabs[multirow] .tabbrowser-arrowscrollbox .scrollbutton-down-stack/*[Fx2only]*/,
.tabbrowser-tabs[multirow] .tabbrowser-arrowscrollbox .scrollbutton-down/*[Fx3only]*/{
	display: none !important;
}

.tabbrowser-tabs[multirow="true"] .tabbrowser-arrowscrollbox .scrollbox-innerbox {
	display: block !important; 
	text-align: left !important;
}

.tabbrowser-tabs[multirow="true"][multirowscroll] .tabbrowser-arrowscrollbox .scrollbox-innerbox {
	overflow-y: auto !important;
	/* note that min/max-height will be set to 24*rows too */
}

.tabbrowser-tabs[multirow] .tabbrowser-tab,
.tabbrowser-tabs[multirow] .tabs-newtab-button/*[sinceFx3.5]*/ {
	min-height: 24px !important;
	max-height: 24px !important;
	margin-top:           0   !important; /*[sinceFx3]*/
	margin-bottom:        0   !important; /*[sinceFx3]*/
	border-top-width:     1px !important; /*[sinceFx3.6]*/
	border-bottom-width:  0   !important; /*[sinceFx3.6]*/
	padding-top:          0   !important; /*[sinceFx3]*/
	padding-bottom:       2px !important; /*[sinceFx3.6]*/
}

.tabbrowser-tabs[multirow] .tabs-newtab-button > image/*[sinceFx3.6]*/ {
	height: 17px;
}

/* Center All Tabs button */
.tabbrowser-tabs .tabs-stack > vbox:last-child > hbox/*[Fx2only]*/,
.tabbrowser-tabs .tabs-container/*[Fx3only]*/ {
	-moz-box-align: center !important;
}
.tabbrowser-tabs .tabs-alltabs-stack/*[Fx2only]*/,
.tabbrowser-tabs .tabs-container > stack/*[Fx3only]*/ {
	max-height: 29px !important;
}

/* Hide bottom border as it doesn't work graphically with multiple rows of tabs TODO-P6: find a way to replace it? */
.tabbrowser-tabs[multirow="true"] .tabs-bottom {
	display: none !important;
}

/*************************
 * Scrollbars not arrows *
 *************************/

#main-window[scrollbarsnotarrows] arrowscrollbox[orient="vertical"] > scrollbox > .scrollbox-innerbox {
	overflow-x: hidden !important;
	overflow-y: auto !important;
}
#main-window[scrollbarsnotarrows] arrowscrollbox[orient="vertical"] > .autorepeatbutton-up,
#main-window[scrollbarsnotarrows] arrowscrollbox[orient="vertical"] > .autorepeatbutton-down {
	display: none !important;
}

/*****************************
 * Make personas look better *
 *****************************/

#main-window[persona] {
	background-repeat: repeat-y !important; /* Especially for vertical tab bar */
}
#main-window[persona] .tabbrowser-tab {
	opacity: 0.9 !important; /* Instead of default 0.6 */
}
#main-window[persona] .tabbrowser-tab[selected="true"] {
	opacity: 1.0 !important; /* Instead of default 0.8 */
}